<template>
  <transition name="cj-actionsheet-slide-bottom" @after-enter="$emit('opened')" @after-leave="$emit('closed')">
    <div v-show="value" class="cj-actionsheet" :class="[{ round }]" :style="{ animationDuration: transitionDuration }">
      <div class="cj-actionsheet-custom" slot-scope>
        <slot name="custom"></slot>
      </div>
      <ul class="cj-actionsheet-menu">
        <li class="cj-actionsheet-item" :class="{ active: isHighlight(item), disabled: item.disable }" v-for="(item, index) of itemList" :key="index" @click="chooseItem(item, index)">
          {{ item[optionTag] }}
          <p v-if="item.subTit" class="sub-tit">{{ item.subTit }}</p>
        </li>
      </ul>
      <div class="cj-actionsheet-cancel" @click="cancelActionSheet" v-if="cancelText">
        {{ cancelText }}
      </div>
    </div>
  </transition>
</template>
<script>
import touchMixins from '../popup/touch';
import overlayManager from '../popup/overlay/overlay-manager';
import overlayProps from '../popup/overlay/overlayProps';
export default {
  name: 'cj-actionsheet',
  mixins: [touchMixins],
  props: {
    ...overlayProps,
    round: {
      type: Boolean,
      default: false
    },
    getContainer: String,
    itemList: {
      type: Array,
      default: () => []
    },
    optionTag: {
      type: String,
      default: 'name'
    },
    closeOnChoose: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: [String, Boolean],
      default: '取消'
    },
    chooseTagValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.portal();
  },
  watch: {
    value(val) {
      const type = val ? 'open' : 'close';
      this[type]();
    },
    position(val) {
      val === 'center' ? (this.transitionName = 'popup-fade') : (this.transitionName = `popup-slide-${this.position}`);
    },
    overlay: 'renderOverlay',
    getContainer: 'portal'
  },
  computed: {
    transitionDuration() {
      return this.duration ? this.duration + 's' : 'initial';
    }
  },
  methods: {
    open() {
      if (this._opened) return;
      this._opened = true;
      this.$emit('open');
      const { duration, overlayClass, overlayStyle, lockScroll, closeOnClickOverlay } = this;
      const config = {
        id: this.id,
        zIndex: this.zIndex ? this.zIndex : overlayManager.getZIndex(this.id),
        duration,
        overlayClass,
        overlayStyle,
        lockScroll,
        closeOnClickOverlay
      };
      this.renderOverlay(config);
      if (this.lockScroll) {
        document.addEventListener('touchstart', this.touchStart, false);
        document.addEventListener('touchmove', this.onTouchMove, false);
        if (!overlayManager.lockCount) {
          document.body.classList.add('cj-overflow-hidden');
        }
        overlayManager.lockCount++;
      }
      this.$el.style.zIndex = this.zIndex ? this.zIndex + 1 : overlayManager.getZIndex();
    },
    close() {
      if (!this._opened) return;
      this.$emit('close');
      this._opened = false;
      if (this.lockScroll) {
        overlayManager.lockCount--;
        document.removeEventListener('touchstart', this.touchStart);
        document.removeEventListener('touchmove', this.touchMove);
        if (!overlayManager.lockCount) {
          document.body.classList.remove('cj-overflow-hidden');
        }
      }
      overlayManager.closeOverlay(this);
      this.$emit('input', false);
    },
    renderOverlay(config) {
      if (!this.value) return;
      if (this.overlay) {
        overlayManager.openOverlay(this, config);
      } else {
        overlayManager.closeOverlay(this);
      }
    },
    portal() {
      const { getContainer } = this;
      if (getContainer) {
        let el = this.$el;
        let container = document.querySelector(getContainer);
        if (container && container !== el.parentNode) {
          container.appendChild(el);
        }
      }
    },
    chooseItem(item, index) {
      if (!item.disable) {
        if (this.closeOnChoose) {
          this.closeActionSheet();
        }
        this.$emit('choose', item, index);
      }
    },
    closeActionSheet() {
      this.$emit('close');
      this.$emit('input', false);
    },

    cancelActionSheet() {
      this.closeActionSheet();
      this.$emit('cancel');
    },
    isHighlight(item) {
      return (this.chooseTagValue && this.chooseTagValue == item[this.optionTag]) || this.chooseTagValue === 0;
    }
  }
};
</script>
